<template>
  <el-container class="main">
    <el-main>
      <EditorMain :show-shopping="!importRes">
        <SearchParam
          :belong="belong"
          :language="language"
          :pid="pid"
          :on-change-parent-type="onChangeType"
          :on-change-parent-classifies="onChangeClassifies"
          :on-change-parent-order="onChangeOrder"
          :on-change-third-parent-classifies="onChangeThirdClassifies"
          :on-change-belong="onChangeBelong"
        >
          <div style="display: flex; align-items: center">
            <input
              class="search-input"
              v-model="keyWord"
              type="text"
              :placeholder="$t('resource.searchPlaceholder')"
              title=""
              @keyup.enter="onSearch"
            />
            <span class="search-btn" @click="onSearch">{{
              $t("common.search")
            }}</span>
          </div>
        </SearchParam>

        <div class="nav-menu">{{ showFromWhere }}>{{ pName }}</div>

        <ResList
          ref="list"
          :thirdSub="thirdSub"
          :orderType="orderType"
          :belong="belong"
          :support="support"
          :sub="subType"
          :userId="userId"
          :list="list"
          :resourceName="resourceName"
          :importRes="importRes"
          :language="language"
          :pid="pid"
          :has-res="hasRes"
          :page="page"
          :total="total"
          :on-change-page="onChangePageInfo"
          :on-parent-jump-to-res-shop="onJumpToResShop"
        />
        <div>
          <ImportBtn
            v-if="importRes"
            :import-parent-resources="importResources"
          />
        </div>
      </EditorMain>
    </el-main>
  </el-container>
</template>

<script>
import EditorMain from "../../components/EditorMain";
import ImportBtn from "../../components/res-list/ImportResButton";
import ResList from "../../components/res-list/ResList";
import SearchParam from "../../components/res-list/ResSearchParam";

import api from "../../common/api";
import ajax from "../../common/ajax";
import encryption from "../../common/encryption";

let language;
let userId;
let context;
let u;

export default {
  name: "ResourceList",
  components: { ResList, ImportBtn, EditorMain, SearchParam },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.$store.commit("keepAlive/setKeepAlive", ["ResourceList"]);
    });
  },
  data() {
    return {
      selected: false,
      // 子分类
      sub: [],
      // 资源归属
      belong: 1,
      // 资源类别
      resList: [],
      // 是否有资源列表
      hasRes: false,
      // 分类名称
      pName: "",
      list: [],
      // 资源名称
      resourceName: "",
      // 资源总数
      total: 0,
      // 是否导入资源
      importRes: false,
      // 资源每页资源数量
      pageSize: 12,
      // 资源第几页
      page: 1,
      // 选择资源高度
      selectedResHeight: 0,
      // 支持类型
      support: -1,
      // 用户ID
      userId: -1,
      keyWord: "",
      // 父分类ID
      pid: -1,
      // 语言环境
      language: "zh-cn",
      // 子分类类型
      subType: "",
      // 分类
      classifies: [],
      // 排序方式
      orderType: "",
      // 子分类数据
      childSub: [],
      // 第三方分类数据
      thirdSub: -1,
    };
  },
  computed: {
    showFromWhere() {
      if (this.belong === 1) {
        return this.$t("common.privRepertory");
      } else if (this.belong != 1 && this.belong != 3) {
        return this.$t("common.cusRepertory");
      } else if (this.belong === 3) {
        return this.$t("common.mxrRepertory");
      }
    },
  },
  created() {
    language = this.$route.query.culture;
    userId = this.$route.query.userId;
    u = navigator.userAgent;

    this.userId = this.$route.query.userId;
    this.pid = parseInt(this.$route.query.pid);
    this.language = this.$route.query.culture;
    this.belong = parseInt(this.$route.query.belong);
    this.pName = this.$route.query.name;

    this.importRes = this.$route.query.importRes.toString() === "true";
    getResources(1, this);
  },
  mounted() {
    new QWebChannel(qt.webChannelTransport, function (channel) {
      context = channel.objects.JSSendMessage;
    });
  },
  updated() {
    let bottom = document.getElementById("bottomLine");
    if (bottom) {
      this.selectedResHeight = bottom.offsetTop - 281;
    }
  },
  methods: {
    onJumpToResShop(t) {
      if (u.indexOf("Trident") > -1) {
        window.external.JSCallMFCFunctionoCustomizedResourceJumpPurchase(t);
      } else if (u.indexOf("AppleWebKit") > -1) {
        context.useFunction_Jump(t);
      }
    },
    importResources(m) {
      if (u.indexOf("Trident") > -1) {
        window.external.JSCallMFCFunctionoLoadingResource(m);
      } else if (u.indexOf("AppleWebKit") > -1) {
        context.sendResources(m);
      }
    },
    //改变请求信息
    onChangeBelong(item) {},
    goback() {
      getResources(1, this);
    },
    /**
     * 改变子分类信息
     */
    onChangeThirdClassifies(item) {
      this.thirdSub = item.id;
      getResources(1, this);
    },
    /**
     * 改变分类信息
     */
    onChangeClassifies(item) {
      this.thirdSub = -1;
      this.subType = item.id;
      getResources(1, this);
    },

    /**
     * 改变类型信息
     */
    onChangeType(item) {
      if (item.resourceName == undefined) {
        this.resourceType = item.resourceType;
        this.support = -1;
        this.subType = "";
        this.thirdSub = -1;
        this.pid = item.id;
        this.pName = item.name;
        getResources(1, this);
      }
    },

    /**
     * 改变资源排序方式
     *
     * @param type 排序方式
     */
    onChangeOrder(type) {
      this.orderType = type;
      getResources(1, this);
    },

    /**
     * 改变分页信息
     *
     * @param e 分页下标
     */
    onChangePageInfo(e) {
      getResources(e, this);
    },

    /**
     * 进行资源的搜索
     */
    onSearch() {
      if (this.keyWord === " ") {
        return;
      }
      getResources(1, this);
    },
  },
  beforeRouteLeave(to, from, next) {
    if (to.path.indexOf("/home") > -1 || to.path.indexOf("/import-home") > -1) {
      this.$store.commit("keepAlive/setKeepAlive", []);
    } else {
      this.$store.commit("keepAlive/setKeepAlive", ["ResourceList"]);
    }
    next();
  },
};
/**
 * 根据不同条件进行资源筛选
 * @param page 页数
 * @param that VUE对象
 */
function getResources(page, that) {
  if (that.thirdSub !== -1) {
    that.subType = that.thirdSub;
  }
  //资源列表
  ajax.get({
    url: api.resource.privateRouteName + api.resource.children.list,
    data: {
      resourceType: that.resourceType,
      belong: that.belong,
      classifyId: that.subType,
      userId: userId,
      keyWord: that.keyWord,
      pageNo: page,
      pageSize: 12,
    },
    success(res) {
      encryption.decryptionMxr(res);
      this.response = JSON.parse(encryption.decryptionMxr(res));
      that.hasRes =
        this.response.list !== null && this.response.list.length > 0;
      that.$store.commit("resources/initDbResources", {
        resList: this.response.list || [],
        importRes: that.importRes,
      });
      console.log(that);
      // console.log(that.$children[0].$children[0].$children[0].$children[2].loading=true)
      that.$children[0].$children[0].$children[0].$children[2].loading = false;
      that.total = this.response.total;
      that.page = page;
    },
    fail(res) {},
  });
  // }
}

/**
 * 初始化移除资源选择
 *
 * @param that VUE对象
 */
function initRemoveResSelected(that) {
  that.resList.forEach((el) => {
    let index = that.resList.indexOf(el);
    el.selected = false;

    that.selected.forEach((s) => {
      if (el.modelId === s.modelId) {
        el.selected = true;
      }
    });

    that.$set(that.resList, index, el);
  });
}
</script>

<style scoped>
.main {
  min-height: 100%;
  width: 100%;
  background: #eff3f5;
}

.top-group {
  width: 95%;
  display: flex;
  align-items: center;
  margin: 0 auto;
  padding: 25px 0;
  justify-content: space-between;
  border-bottom: 1px solid #cccccc;
}

.top-classifies-label {
  font-size: 18px;
  color: #999999;
  display: inline-block;
  margin-top: 5px;
}

.res-span {
  display: inline-block;
  padding: 5px 10px;
  background: #ededed;
  border-radius: 4px;
  font-size: 14px;
  color: #999999;
  margin-left: 15px;
  cursor: pointer;
  margin-top: 5px;
}

.res-span-active {
  background: #393d49;
  color: #ffffff;
}

.search-input {
  height: 25px;
  padding: 10.5px 20px;
  border: 2px solid #cccccc;
  border-radius: 4px;
  font-size: 18px;
  color: #999999;
}

.search-btn {
  width: 77px;
  height: 43.2px;
  background: #4381e6;
  border-radius: 4px;
  margin-left: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.search-btn img {
  display: block;
  width: 35px;
  margin: 0 auto;
}

.nav-menu {
  width: 95%;
  margin: 15px auto 0;
  font-size: 18px;
  color: #999999;
}

.s1 {
  font-size: 14px;
  margin-top: 5px;
  margin-left: 12px;
  color: #4381e6;
}

#s2,
#s3,
#s4,
#s5 {
  font-size: 15px;
}

#s2,
#s4 {
  color: #cccccc;
}

#s3,
#s5 {
  color: #cccccc;
}

#s2:hover,
#s3:hover,
#s4:hover,
#s5:hover {
  cursor: pointer;
}

.search-btn {
  width: 60px;
  height: 43.2px;
  background: #4381e6;
  border-radius: 4px;
  margin-left: 18px;
  cursor: pointer;
  color: white;
  padding-right: 3px;
  padding-left: 20px;
  line-height: 43.2px;
  font-size: 18px;
}
</style>
